{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/bottom_navigation_transition/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"c08c5a91-be26-5225-9c3c-9699ba0e43fe","excerpt":"TODO 아래로 스크롤할 때, 공간의 활용을 위해 네비게이션을 아래로 숨겨야함 위로 스크롤을할 때 다시 네이베이션을 보여야함 스크롤이 bottom에 닿으면 네비게이션을 보여야함 TS HTML SCSS 부드러운 ux를 위해 transition을 이용한다.","html":"

\n

\n

TODO

\n\n\n

\n

\n
\n

TS

\n
\n
@Directive({ selector: '[footerScroller]' })\nexport class MobileFooterScroller {\n  @Input() footerHeight: number;\n\n  beforePageYOffset = 0;\n  currentUrl$ = this.store$.select(selectCurrentURL);\n  reqAniId: number;\n\n  prevState: string;\n\n  ngAfterViewInit(): void {\n    this._sub.push(\n      this.currentUrl$.subscribe(\n        () => {\n          this.addClass('sticky');\n          this.removeClass('hide-footer');\n        }\n      )\n    );\n\n    this.zone.runOutsideAngular(() => {\n      window.addEventListener(\n        'scroll',\n        this.onWindowScroll,\n        enablePassive());\n    });\n  }\n\n  ngOnDestroy() {\n    this.zone.runOutsideAngular(() => {\n      window.removeEventListener('scroll', this.onWindowScroll);\n    });\n  }\n\n  onWindowScroll = () => {\n    const yOffset = window.pageYOffset;\n    const currentState = this.getCurrentState(yOffset);\n    if (this.prevState !== currentState) {\n      if (this.reqAniId) {\n        cancelAnimationFrame(this.reqAniId);\n      }\n\n      this.reqAniId = requestAnimationFrame(() => {\n        switch (currentState) {\n          case 'bottom':\n            this.removeClass('hide-footer');\n            this.addClass('sticky');\n            break;\n\n          case 'up':\n            this.removeClass('hide-footer');\n            this.addClass('sticky');\n            break;\n\n          case 'down':\n            this.removeClass('sticky');\n            this.addClass('hide-footer');\n            break;\n        }\n      });\n    }\n\n    this.prevState = currentState;\n    this.beforePageYOffset = yOffset;\n  };\n\n  getCurrentState(yOffset) {\n    const IS_SCROLL_BOTTOM = (window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - this.footerHeight;\n    const IS_SCROLL_UP = this.beforePageYOffset > yOffset && yOffset > this.footerHeight;\n    const IS_SCROLL_DOWN = yOffset > this.footerHeight;\n\n    let currentState: string;\n    if (IS_SCROLL_BOTTOM) {\n      currentState = 'bottom';\n    } else if (IS_SCROLL_UP) {\n      currentState = 'up';\n    } else if (IS_SCROLL_DOWN) {\n      currentState = 'down';\n    }\n\n    return currentState;\n  }\n\n  addClass(className: string) {\n    this.renderer.addClass(this.elementRef.nativeElement, className);\n  }\n\n  removeClass(className: string) {\n    this.renderer.removeClass(this.elementRef.nativeElement, className);\n  }\n}
\n

\n
\n

HTML

\n
\n
<div footerScroller footerHeight=\"45\">\n  <div class=\"footer-nav\">\n    <a routerLink=\"/main\" routerLinkActive=\"active\"></a>\n    <a routerLink=\"/piano/sheet\" routerLinkActive=\"active\"></a>\n    <a routerLink=\"/video\" routerLinkActive=\"active\"></a>\n    <a routerLink=\"/community\" routerLinkActive=\"active\"></a>\n    <a routerLink=\"/store/main\" routerLinkActive=\"active\"></a>\n  </div>\n</div>
\n

\n
\n

SCSS

\n
\n\n
:host > div[footerScroller] {\n  > div {\n    position: relative;\n    -webkit-transition: bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);\n    -moz-transition: bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);\n    -o-transition: bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition: bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);\n  }\n\n  &.sticky {\n    > div {\n      bottom: 0;\n    }\n  }\n\n  &.hide-footer {\n    > div {\n      bottom: -$tab-menu-height;\n      bottom: calc((constant(safe-area-inset-bottom) + #{$tab-menu-height}) * -1) !important;\n      bottom: calc((env(safe-area-inset-bottom) + #{$tab-menu-height}) * -1) !important;\n    }\n  }\n}
","frontmatter":{"title":"Bottom Navigation Scrolling","date":"July 06, 2020"}}},"pageContext":{"slug":"/Today I Learned/bottom_navigation_transition/","previous":{"fields":{"slug":"/development/quick_start/"},"frontmatter":{"title":"Quick Start","category":"development","draft":false}},"next":{"fields":{"slug":"/Today I Learned/wrap_observably/"},"frontmatter":{"title":"Wrap Observably","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}